<template>
  <div class="outer">
    <layout class="w-auto p10-x mt15 h-80vh">
      <template slot="search">
        <el-form inline :model="searchParam">
          <div class="search-left">
            <el-form-item>
              <el-input v-model="searchParam.noticeNumber" class="w150" placeholder="输入通知单号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchParam.workingNumber" class="w150" placeholder="输入产品工号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchParam.drawingNumber" class="w150" placeholder="输入产品图号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-form-item label="交货日期: " label-width="150">
                <el-date-picker v-model="searchParam.beginDate" type="date" placeholder="开始日期"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-date-picker v-model="searchParam.endDate" type="date" placeholder="结束日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="仅看待处理: ">
                <el-switch v-model="searchParam.justPending" active-color="#13ce66"> </el-switch>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清空</el-button>
              <el-button type="primary" @click="query()">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </template>
      <!-- <template slot="operation" style="height:0;min-height:0;"></template> -->
      <template slot="content">
        <el-table border stripe :data="reportCompletionDateArray">
          <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
          <el-table-column prop="noticeNumber" label="通知单号" align="center" width="100"></el-table-column>
          <el-table-column prop="workingNumber" label="产品工号" align="center" width="100"></el-table-column>
          <el-table-column prop="drawingNumber" label="图号" align="center" width="120"></el-table-column>
          <el-table-column prop="productName" label="品名" align="center" width="120"></el-table-column>
          <el-table-column prop="materialQuality" label="材质" align="center" width="120"></el-table-column>
          <el-table-column prop="number" label="数量" align="center" width="80"></el-table-column>
          <el-table-column prop="deliveryDate" label="交货日期" align="center" width="150"></el-table-column>
          <el-table-column prop="statistics.finishedNumber" label="完工数量" align="center" width="100"></el-table-column>
          <el-table-column prop="statistics.workingNumber" label="在产数量" align="center" width="100"></el-table-column>
          <el-table-column prop="statistics.pendingNumber" label="待处理数量" align="center" width="100"></el-table-column>
          <el-table-column prop="statistics.waitingNumber" label="未投产数量" align="center" width="100"></el-table-column>
          <el-table-column prop="typeProduction" label="类型" align="center" width="80"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" width="100"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center" min-width="100"></el-table-column>
        </el-table>
      </template>
    </layout>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import dayjs from 'dayjs'

const vuexBi = namespace('BiReport')

@Component({
  components: {
    Layout
  }
})
export default class Salary extends Vue {
  @vuexBi.Action GET_COMPLETION: any
  @vuexBi.State reportCompletionDateArray: any

  searchParam: any = {
    noticeNumber: '',
    workingNumber: '',
    drawingNumber: '',
    beginDate: '',
    endDate: '',
    justPending: false,
    page: 1,
    pageSize: 20
  }

  pickerOptions: any = {
    shortcuts: [
      {
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }
    ]
  }

  clear() {
    this.searchParam = {
      noticeNumber: '',
      workingNumber: '',
      drawingNumber: ''
    }
  }

  query() {
    if (this.searchParam.beginTime) {
      if (this.searchParam.endTime) {
        this.compareSearchDate()
      } else {
        this.$alert('请同时输入搜索开始与结束日期后，进行搜索', '操作提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
    } else if (this.searchParam.endTime) {
      if (this.searchParam.beginTime) {
        this.compareSearchDate()
      } else {
        this.$alert('请同时输入搜索开始与结束日期后，进行搜索', '操作提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
      }
    } else {
      this.searchParam.page = 1
      this.GET_COMPLETION(this.searchParam)
    }
  }

  compareSearchDate() {
    this.searchParam.endTime = dayjs(this.searchParam.endTime).format('YYYY-MM-DD')
    this.searchParam.beginTime = dayjs(this.searchParam.beginTime).format('YYYY-MM-DD')
    if (this.searchParam.endTime > this.searchParam.beginTime) {
      this.GET_COMPLETION(this.searchParam)
    } else {
      this.$alert('请输入搜索结束日期大于开始日期', '操作提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.outer {
  width: 100%;
}
</style>